<template>
    <div class="demo">
        <h2 @click="showName" style="cursor: pointer;">学生姓名:{{ name }}</h2>
        <h2>学生性别:{{ sex }}</h2>
    </div>
</template>

<script>
import Vue from 'vue';
import { hunru, hunru2 } from '../mixin'
export default Vue.extend({
    name: 'Student',
    data() {
        return {
            name: "张三",
            sex: "男",
            // data里的属性和mixin重合了，以data为主，methods也是
        }
    },
    mounted() {
        // mounted这种生命周期函数和mixin重合了，都执行，不过mixin是先执行
        console.log("mmounted：'mixin和自身两边都有生命周期钩子，都会执行，不冲突，但是我会在混入之后执行'");
    },
    mixins: [hunru, hunru2]
}) 
</script>

<style>
.demo {
    background-color: orange;
}
</style>